<template>
  <div class="component-upload-image">
    <el-upload
      action=""
      list-type="picture-card"
      :auto-upload="false"
      multiple
      :on-change="handleChange"
      name="file"
      :on-remove="handleRemove"
      :show-file-list="true"
      :file-list="fileList"
      accept=".png,.jpg,.jpeg,.mp4"
    >
      <i class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img v-if="file.name.split('.')[1] != 'mp4'"
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        <video
          v-else
          :autoplay="false"
          controls
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        </video>
        <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
      </div>
    </el-upload>

    <!-- 上传提示 -->
    <div class="el-upload__tip" slot="tip" >
      <template> 单张图片大小不超过 <b style="color: #f56c6c">2MB</b> 尺寸800*800 ,单个视频大小不超过 <b style="color: #f56c6c">50MB</b></template>
      <br>
      <template> 图片支持格式 <b style="color: #f56c6c">png/jpg/jpeg</b>,视频支持格式 <b style="color: #f56c6c">mp4</b> </template>
      的文件
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      fileList: []
    };
  },
   methods: {
    reset(){
      this.fileList=[];
      this.$emit("input", this.fileList);
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      this.$emit("input", this.fileList);
    },
    // 删除图片
    handleRemove(file) {
      const findex = this.fileList.map(f => f.name).indexOf(file.name);
      this.fileList.splice(findex, 1);
      this.$emit("input", this.fileList);
    }
  }
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
    display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
}
</style>

